<template>
	<view>
		<view>
			<view class="talkList">
				<view class="talkListUser"><image @tap="ViewImage(replyDetailList.userHead)" :src="replyDetailList.userHead"></image><text>{{replyDetailList.fromUserName}}:</text></view>
				<view class="replyMoudule">
					<view class="talkListContent">{{replyDetailList.content}}</view>
					<view class="talkListTime">{{replyDetailList.time}}</view>
				</view>
			</view>
		</view>
		<!-- 评论下的回复 -->
		<view>
			<view class="allReplyTitle">
				<view></view>
				<view>全部回复</view>
				<view></view>
			</view>
			<view class="talkList" v-for="(item,index) in newdataList" :key='index'>
				<view class="talkListUser"><image @tap="ViewImage(item.userHead)" :src="item.userHead"></image><text>{{item.fromUserName}}:</text></view>
				<view class="replyMoudule">
					<view @tap="textareaClick(index)" class="talkListContent">{{item.content}}
					<text class="toUser" v-if="item.commentContent | item.commentId !== replyDetailList.id">//@{{item.commentUserName}}:<text
							 class="toContent">{{item.commentContent}}</text></text></view>
					<view class="talkListTime">{{item.time}}<text>回复</text><text @click="myDelect(item.id)" style="color: #02A7F0;" v-if="item.from_uId==userId">删除</text></view>
				</view>
			</view>
		</view>
		<!-- 占位div -->
		<view class="placeholder"></view>
		<view class="bottomNav" v-show="isTextareaClick">
			<view>
			<textarea @tap="textareaClick()" disabled="true" :placeholder="'回复'+replyDetailList.fromUserName" placeholder-style="color:#8d8d8d;" />
			</view>
			<view><!-- <button>发送</button> --></view>
		</view>
		<!-- 回复框 -->
		<view @touchmove.stop.prevent="moveHandle" class="sendModel" v-show="isTopicModel">
			<view class="sendContent" >
			<view class="sendBut"><text @tap="hiddenSendModel()">取消</text><text @tap="talkForTopic()" style="color: #0081FF;">发送</text></view>
			<view class="sendTextarea"><textarea :focus="focus" v-model="sendtext" cursor-spacing='20' maxlength='250' :placeholder="placeholder"></textarea></view>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
			    replyDetailList:[],
				nextReplyDetailList:[],
				isTextareaClick:true,
				isTopicModel:false,
				placeholder:'友善发言,理性讨论,阳光你我',
				focus:false,
				sendtext:'',
				topicId:"",
				replyDetailIndex:"",
				checked:-1,
				arr:"",
				userId:""
			}
		},
		onReady() {
			// this.getTopicDetail()
			this.userId = this.User.userInfo.id;
		},
		onLoad(data) {
			console.log(data.index)
			console.log(data.topicId)
			this.topicId = data.topicId;
			this.replyDetailIndex=data.index;
			this.getReply(data.topicId);
		},
		computed:{
			 newdataList: function() {
			        return this.sortKey(this.nextReplyDetailList, "time");
			      }
		},
		methods:{
			//删除自己的评论
			myDelect(index){
				uni.showModal({
					title:"提示",
					content:"你确定要删除该条评论吗？",
					success: (res) => {
						if(res.confirm){
							uni.request({
								url:this.confige.webUrl+"/essay/delCommentEssay",
								header: {
										'X-Token': this.User.token
								},
								data:{
									id:index
								},
								success: (res) => {
									console.log(res);
									if(res.data.code){
										uni.showToast({
											title:'删除成功'
										})
										this.getReply(this.topicId)
									}
									else{
										uni.showToast({
											title:res.data.message
										})
									this.getReply(this.topicId)
									}
								}
							})
						}
					}
				})
			
			},
			//图片预览
			ViewImage(url) {
				var arr = [];
				arr.push(url)
				uni.previewImage({
					urls: arr,
					current: 0,
					success: (res) => {
						console.log(res)
					},
				});
			},
			//按时间排序
			 sortKey(array, time) {
			        return array.sort(function(a, b){
			          var x = a[time];
			          var y = b[time];
			          return x > y ? -1 : x < y ? 1 : 0;
			        });
			      },
			//发表评论
			talkForTopic(){
				//回复
				if(this.checked>-1){
				uni.request({
					url:this.confige.webUrl+"/essay/comment",
					header:{
						'X-Token':this.User.token
					},
					data:{
						essayId:this.topicId,
						content:this.sendtext,
						topicType:2,
						commentId:this.replyDetailList.comments[this.checked].id,
					},
					method:"POST",
					success: (res) => {
						console.log(res)
						if(res.data.code==400){
						  uni.showToast({
						  	icon:"none",
							title:"内容重复！"
						  })
						}
						this.hiddenSendModel()
						this.getReply(this.topicId)
					}
				})
				}
				//评论
				else{
					uni.request({
					url:this.confige.webUrl+"/essay/comment",
					header:{
						'X-Token':this.User.token
					},
					data:{
						essayId:this.topicId,
						content:this.sendtext,
						topicType:2,
						commentId:this.replyDetailList.id,
					},
					method:"POST",
					success: (res) => {
						// console.log(res)
						if(res.data.code==400){
						  uni.showToast({
						  	icon:"none",
							title:"内容重复！"
						  })
						}
						this.hiddenSendModel()
						this.getReply(this.topicId)
					}
				})
				}
			},
			//评论框点击事件
			textareaClick(index){
				// console.log(index)
				this.isTopicModel=true;
				this.isTextareaClick=false;
				this.focus=true;
				if(index>-1){
					this.checked=index;
					this.placeholder="回复"+this.replyDetailList.comments[index].fromUserName;
				}
				else{
					this.checked = -1;
					this.placeholder = '友善发言,理性讨论,阳光你我';
				}
			},
			//隐藏评论框
			hiddenSendModel(){
				this.isTopicModel=false;
				this.isTextareaClick=true;
				this.sendtext='';
				this.focus=false;
				this.placeholder = '友善发言,理性讨论,阳光你我';
				this.checked = -1;
			},
			//获取评论信息
			getReply(id){
				uni.request({
					url:this.confige.webUrl+"/essay/listCommentEssay",
					header:{
						'X-Token':this.User.token
					},
					data:{
						id:id,
					},
					success: (res) => {
						console.log(res.data.result[this.replyDetailIndex]);
						this.replyDetailList = res.data.result[this.replyDetailIndex];
						this.nextReplyDetailList = res.data.result[this.replyDetailIndex].comments;
						var list = this.replyDetailList.comments;
						// console.log(list)
						//获取三级回复
						var arr = [];
						for(var i =0;i<list.length;i++){
							if(list[i].comments.length>0){
							arr.push(
								list[i].comments
							)
							}
						}
						// console.log(arr);
						this.arr = arr;
						this.threeReply();
					}	
				})
			},
			//赋值三级回复
			threeReply(){
				var arr1 = [];
				var list1 = this.arr;
				for(var i =0;i<list1.length;i++){
					for(var y =0;y<list1[i].length;y++){
						var data = list1[i]
							arr1.push(
							data[y]
							 )
					}
				}
				console.log(arr1)
				this.nextReplyDetailList.push(...arr1)
			}
		}
	}
</script>

<style lang="less" scoped>
	 @import '../../common/global.less';
	 page{ background-color: #FFFFFF;}
	 .toUser{ 
		 padding-left: 10upx;
	 color:@fontcolor;
	.toContent{ color:#000; padding-left: 10upx;}
	 }
	 .allReplyTitle{
		 height: 50upx;
		 margin-top: 20upx;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 >view:nth-of-type(1){ width:50rpx; border-top: 5rpx solid @bordercolor; margin-right: 20rpx;}
		 >view:nth-of-type(2){ font-size: 35rpx; font-weight: bold;}
		 >view:nth-of-type(3){width:50rpx; border-top: 5rpx solid @bordercolor;margin-left: 20rpx;}
	 }
	 .placeholder{ width: 100%;height: 100rpx;}
	 .sendTextarea{ width:94%; margin: auto;
	 	>textarea{ background-color:#F2F2F2;margin-bottom: 50rpx; width:100%;font-size: 28rpx; height: 170rpx; border-radius: 20rpx; padding: 10rpx;}
	 	}
	 .sendModel{background-color: @uni-bg-color-mask;position:fixed; top:0;height:100%;width:100%;z-index: 1;
	 .sendContent{
	 	 position: absolute;
	 	 background-color: #FFFFFF;
	 	 bottom: 0;
	 	 width: 100%;
	 	 border-radius: 20rpx 20rpx 0rpx 0rpx;
	       }
	 .sendBut{ 
	 width: 90%; margin:20rpx auto; display: flex;
	 justify-content: space-between; font-size: 30rpx; color:#888888;
	  } 
	 }
	 .bottomNav{
		 position:fixed;
		 bottom: 0;
		 border-top: 1upx solid #e1e1e1;
		 width: 100%;
		 height: 90upx;
		 background-color: #FFFFFF;
		 display: flex;
		 align-items: center;
		 >view:nth-of-type(1){ 
			   width:64%;
			   textarea{
			   width: 80%;
			   font-size: 25upx;
			   height: 40upx;
			   margin: auto;
			   border-radius: 20upx;
			   padding:10upx 5upx 5upx 10upx;
			   background-color:#f0f0f0;}
			   }
			   >view:nth-of-type(2){ width:36%; display: flex;align-items: center;
				   button{ height: 50upx; line-height: 50upx; font-size: 30upx;margin-left: 10upx;}
				    image{ height: 40upx; width: 40upx; margin-right: 80upx;}
			   }}
		.talkList{width: 98%; margin: auto; margin-top: 15upx;
		.talkListUser{
			font-size:@fontSize;
			font-weight: bold;
			letter-spacing:5upx;
			display: flex;
			align-items: flex-start;
			text{
				padding-left: 15rpx;
			}
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
			}
			}
		.replyMoudule{
			margin-top: -40rpx;
			width:86%;
			margin-left:95rpx ;
			padding-bottom:10upx;
			}
		.talkListTime{ color:@fontcolor;
				font-size: @fontSize;
				padding-top: 10upx;
				>text{padding-left:10upx; color:#000000;}
				}
		.reply{
			 background-color:#f0f0f0;color:#000000; font-size: 28upx;padding:10upx;margin-top: 10upx;border-radius: 20upx;
			.replyList{
			>text{ overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;}
			}
			.replyListUserName{
				font-weight: bold;
				>text:nth-of-type(2){ color:@fontcolor;margin-left: 10upx;}
				>text:nth-of-type(3){ margin-left: 10upx;}
				}
				.surplus{ color:#0081FF;padding-left: 2upx;}
			}
		.talkListContent{ font-size: 30upx; padding: 10rpx 0rpx 10rpx 0rpx;}
		}
</style>
